<template>
  <div class="lsc-train">
    <mt-header title="我的培训">
      <router-link to="/trainlist" slot="right">
        <mt-button>报名</mt-button>
      </router-link>
    </mt-header>

    <mt-navbar v-model="selected">
      <mt-tab-item id="1">待培训</mt-tab-item>
      <mt-tab-item id="2">已结束</mt-tab-item>
    </mt-navbar>

    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
          <div v-infinite-scroll="loadIngMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
            <mt-cell 
              v-for="(item,index) in trainning" 
              :key="index" 
              :title="item.train_name" 
              :label="'培训时间：'+ item.train_date" 
              is-link 
              :to="'/traindetails?isTrain=0&train_id=' + item.train_id + '&trainName=' + item.train_name">
              <span style="color: #26a2ff" v-if="item.train_status == 1">培训中</span>
              <span style="color: #d42c2c" v-if="item.train_status == 0">未开始</span>
            </mt-cell>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="lsc-trainlist-item" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
          <div v-infinite-scroll="loadEndMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
            <mt-cell 
              v-for="(item,index) in trainend" 
              :key="index" 
              :title="item.train_name" 
              :label="'培训时间：'+ item.train_date" 
              is-link 
              :to="'/traindetails?isTrain=0&train_id=' + item.train_id + '&trainName=' + item.train_name" />
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>

import api from '../api';

export default {
  name: 'train',
  data () {
    return {
      selected: '1',
      trainning: [],
      trainend: [],
      loading: false,
      allLoaded: false,
      wrapperHeight: 0,
      trainIngTotal: 0,
      trainEndTotal: 0,
      pageinfoIng: {
        status: 0,
        pindex:1, 
        psize:15
      },
      pageinfoEnd: {
        status: 1,
        pindex:1, 
        psize:15
      }
    }
  },
  created() {
    this.getTrainsIng()
    this.getTrainsEnd()
  },
  methods: {
    getTrainsIng() {
      this.axios.get(api.housekeeper.MyTrainItems,{
          params: this.pageinfoIng
        })
        .then((res)=>{
          this.trainIngTotal = res.data.pageinfo.total
          this.trainning = res.data.data
        })
    },
    getTrainsEnd() {
      this.axios.get(api.housekeeper.MyTrainItems,{
          params: this.pageinfoEnd
        })
        .then((res)=>{
          this.trainEndTotal = res.data.pageinfo.total
          this.trainend = res.data.data
        })
    },
    loadIngMore() {
      let trainningLen = this.trainning.length
      if(this.trainIngTotal > trainningLen) {
         this.pageinfoIng.pindex =  this.pageinfoIng.pindex + 1
        this.loading = true;
        this.getTrainsIng()
      }else {
        this.loading = false
      }
    },
    loadEndMore() {
      let trainnendLen = this.trainend.length
      if(this.trainEndTotal > trainnendLen) {
         this.pageinfoEnd.pindex =  this.pageinfoEnd.pindex + 1
        this.loading = true;
        this.getTrainsEnd()
      }else {
        this.loading = false
      }
    }
  },
  mounted() {
    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
<style>
.lsc-train .mint-tab-item-label {
  font-size: 14px;
}
.lsc-train .mint-tab-container {
  padding: 5px 0;
}
.lsc-train .mint-tab-container-item a {
  padding: 10px 0;
  margin-bottom: 1px;
}
.lsc-train .mint-cell-wrapper {
  background-size: 0  
}
</style>
